<template>
  <div class="post-details">
    <mtHeader
      fixed
      :title="userInfo.title"
      style="background: linear-gradient(0deg, #399f00, #26701a);height:1rem"
    >
      <div class="header-left iconfont" slot="left" @click="$router.back(-1)">&#xe623;</div>
      <div slot="right iconfont">&#xe73a;</div>
    </mtHeader>
    <div class="container">
      <div class="personal">
        <div class="personal-img">
          <img :src=userInfo.headImg alt />
        </div>
        <div class="personal-rig">
          <div class="per-con">
            <div class="per-con-cn1-num">{{userInfo.userName}}</div>
            <div class="per-con-cn1-huozan">{{userInfo.date}}</div>
          </div>
          <div class="per-con2">
            <p class="per-con2-cn1">+</p>
            <p class="per-con2-cn2">关注</p>
          </div>
        </div>
      </div>

      <div class="post">
        <p class="post-con">{{userInfo.content}}</p>
        <div class="post-img">
          <img :src=userInfo.imgUrl />
        </div>
        <p class="post-label">{{userInfo.postLabel}}</p>
      </div>
      <div class="line-w"></div>
      <Comment :commentList="commentList" style="margin-bottom: .8rem;" @showReply="showReply"></Comment>
      <div class="bot-operation">
        <input placeholder="说点什么吧" v-model="userInfo.saysome"/>
        <div class="bot-zan">
          <i class="iconfont icon1">&#xe60c;</i>
          <span class="bot-cn2">{{userInfo.zanNum}}</span>
        </div>
        <div class="bot-fengxiang">
          <i class="iconfont icon1">&#xe639;</i>
          <span class="bot-cn2">{{userInfo.fxNum}}</span>
        </div>
        <template v-if="userInfo.loved">
          <i class="iconfont icon1">&#xe870;</i>
        </template>
        <template v-else>
          <i class="iconfont icon1">&#xe63a;</i>
        </template>
      </div>
    </div>
    <ReplyDetails :userInfo=userInfo :commentList=commentList v-show="showMask" @hiddleMask1="showReply"></ReplyDetails>
  </div>
</template>
<script>
import { Header, Button } from "mint-ui";
import Comment from "../../components/CommentDetails";
import ReplyDetails from "../../components/replyDetails"
export default {
  name: "feedback",
  components: {
    mtHeader: Header,
    mtButton: Button,
    Comment,
    ReplyDetails
  },
  data: function() {
    return {
      showMask:false,
      userInfo:{
        reply: "188",
        loved:false,
        zanNum:23,
        fxNum:17,
        saysome:'',
        imgUrl: "/static/img/bglq.png",
        content:
          "今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定",
        title: "国际米兰",
        SelfIntroduction: "我是一句自我介绍，只有一句的自我介绍",
        userName: "刘希夷9527",
        headImg: "/static/img/header.png",
        postLabel: "国际米兰",
        date:'十分钟前'
      },
      
      commentList: [
        {
          reply: "188",
          userName: "刘希依9527",
          date: "十分钟前",
          imgUrl: "/static/img/header.png",
          zanNum: 178,
          content:
            "今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定"
        },
        {
          userName: "刘希依9527",
          date: "十分钟前",
          imgUrl: "/static/img/header.png",
          content:
            "今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定",
          videoUrl: "dff",
          zanNum: 177,
          plNum: 103,
          fxNum: 17,
          title: "国际米兰"
        },
        {
          userName: "刘希依9527",
          date: "十分钟前",
          imgUrl: "/static/img/header.png",
          content:
            "今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定",
          videoUrl: "dd",
          zanNum: 177,
          plNum: 103,
          fxNum: 17
        },
        {
          userName: "刘希依9527",
          date: "十分钟前",
          imgUrl: "/static/img/header.png",
          content:
            "今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定今天天气真好，国际米兰又想要赢球，但是没什么机会啊，得加油，努努力多赢点球好吃饭去，内容不限制字数，但是最多显示三行，多少字符开发定",
          videoUrl: "dd",
          zanNum: 177,
          plNum: 103,
          fxNum: 17
        }
      ]
    };
  },
  methods: {
    submit() {},
    showReply(msg){
      console.log(msg)
      this.showMask=msg
    },
    
  }
};
</script>
<style lang="less" scoped>
@import url('~styles/common.less');
</style>